/* 顶部导航区域 */
.top {
  width: 100%;
  position: absolute;
  z-index: 10;
  border-bottom: 1px solid #ccc;
  height: 70px;
}

/* 顶部图片 */
.top-img img {
  position: absolute;
  top: 18px;
  left: 20px;
}

/* 顶部中间部分 */
.top-main {
  position: absolute;
  text-align: center;
  top: 18px;
  left: 50%;
  margin-left: -300px;
  width: 600px;

}

/* 顶部右边部分 */
.top-main a {
  position: relative;
  color: #fff;
  margin: 0 40px;
}

.top-main a.on::after,
.top-main a:hover::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #fff;
  bottom: -30px;
  left: 50%;

  margin-left: -50%;
}

.top-right {
  margin-left: 24px;
}

.top-a1,
.top-a2 {
  display: inline-block;
  height: 30px;
  color: #fff;
  text-align: center;
  line-height: 30px;
  margin-top: 18px;
  font-size: 12px;
}

.top-a1 {
  width: 58px;
  border: 1px solid #fff;
  border-radius: 29px;
  margin-right: 10px;
}

.top-a2 {
  width: 76px;
  background-color: #ed510a;
  border-radius: 38px;
  margin-right: 20px;
}

/* 顶部swiper区域 */
.mySwiper {
  width: 100%;
  height: 680px;
  background-color: rgba(0, 0, 0, 0.1);
}

.mySwiper .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #ccc;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.mySwiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* main部分 */
.main {
  margin-top: 104px;
}

.main-h1 {
  font-size: 40px;
  text-align: center;
  padding-bottom: 10px;
}

.main-p {
  text-align: center;
  font-size: 14px;
}

.main .main-a {
  text-align: center;
  font-size: 14px;
  color: #1271ef;
  padding-top: 22px;
  display: block;
  margin-bottom: 40px;
}

/* 为开发者提供云服务的图片 */
.main-box {
  width: 1000px;
}

.main-box img {
  width: 230px;
}

.main-box .apiimg1,
.apiimg2,
.apiimg3,
.apiimg4 {
  height: 280px;
}

.apiimg1,
.apiimg2,
.apiimg3,
.apiimg4 {
  box-shadow: 5px 5px 5px 5px #a7cbf9;
  ;
}

.apiimg1,
.apiimg2,
.apiimg3 {
  margin-right: 20px;
}

.apiimg1 h1,
.apiimg2 h1,
.apiimg3 h1,
.apiimg4 h1 {
  font-size: 20px;
  font-weight: normal;
  padding-left: 20px;
  padding-bottom: 16px;
}

.apiimg1 p,
.apiimg2 p,
.apiimg3 p,
.apiimg4 p {
  font-size: 12px;
  padding-left: 20px;
  padding-bottom: 24px;
}

.apiimg1 a,
.apiimg2 a,
.apiimg3 a,
.apiimg4 a {
  color: #1271ef;
  font-size: 12px;
  padding-left: 20px;

}

/* 海量的API服务，丰富的API分类 */
.magnanimity {
  width: 100%;
  background-color: #f8f9fb;
  height: 650px;
  margin-top: 100px;
  background-image: url(../images/more-api-bg.svg);
  background-repeat: no-repeat;
  background-position: center;
}

.magnanimity-h1 {
  font-size: 40px;
  text-align: center;
  padding-top: 90px;
}

.magnanimity-p {
  text-align: center;
  font-size: 15px;
  color: #666666;
  padding-top: 10px;
}

.magnanimity-a {
  text-align: center;
  color: #8971f1;
  font-size: 14px;
  display: block;
  padding-top: 25px;
}

/* 海量的API服务，丰富的API分类的图片 */
.magnanimity-img div {
  width: 220px;
  height: 136px;
  background-color: #fff;
  box-shadow: 5px 5px 5px 5px #bad4f8;
  margin-right: 17px;
  margin-top: 18px;
  left: 50%;
}

.magnanimity-img div:nth-child(5n) {
  margin-right: 0;
}

.magnanimity-img img {
  padding-top: 35px;
  padding-left: 92px;
}

.magnanimity-box p {
  text-align: center;
  padding-top: 8px;
}

.magnanimity-writing {
  text-align: center;
  font-size: 14px;
  margin-top: 36px;
}

.magnanimity-writing span {
  color: #000000;
}

.magnanimity-writing a {
  color: #129ef4;
}

/* 慧集 / APIMaster */
.APIMaster {
  margin-top: 90px;
}

.APIMaster h1 {
  font-size: 40px;
  text-align: center;
}

.APIMaster-p {
  text-align: center;
  font-size: 14px;
  padding-top: 20px;
  color: #666666;
}

.APIMaster a {
  display: block;
  text-align: center;
  padding-top: 30px;
  color: #1271ef;
}

/* 慧集 / APIMaster图片主体部分 */
.APIMaster-main-left img {
  width: 600px;
  height: 600px;
}

/* 慧集 / APIMaster图片主体右边部分 */
.APIMaster-main>div>div>div {
  width: 510px;
  height: 84px;
  background-color: #fbfbfd;
  position: relative;
}

.APIMaster-main .APIMaster-main-right .line {
  position: absolute;
  width: 4px;
  height: 28px;
  left: 0;
  top: 28px;
  background-color: #1271ef;
}

.APIMaster-main .APIMaster-main-right2 .line {
  position: absolute;
  width: 4px;
  height: 28px;
  left: 0;
  top: 28px;
  background-color: #1271ef;
}

.APIMaster-main .line {
  position: absolute;
  width: 4px;
  height: 28px;
  left: 0;
  top: 28px;
  background-color: #1271ef;
}

.APIMaster-main .APIMaster-main-right4 .line {
  position: absolute;
  width: 4px;
  height: 28px;
  left: 0;
  top: 28px;
  background-color: #1271ef;
}

.APIMaster-main .APIMaster-main-right5 .line {
  position: absolute;
  width: 4px;
  height: 28px;
  left: 0;
  top: 28px;
  background-color: #1271ef;
}

.APIMaster-main .APIMaster-main-right6 .line {
  position: absolute;
  width: 4px;
  height: 28px;
  left: 0;
  top: 28px;
  background-color: #1271ef;
}

.APIMaster-main-right2 {
  width: 510px;
  height: 84px;
  background-color: #fbfbfd;
  margin-top: 10px;
}

.APIMaster-main-right3 {
  width: 510px;
  height: 84px;
  background-color: #fbfbfd;
  margin-top: 10px;
}

.APIMaster-main-right4 {
  width: 510px;
  height: 84px;
  background-color: #fbfbfd;
  margin-top: 10px;
}

.APIMaster-main-right5 {
  width: 510px;
  height: 84px;
  background-color: #fbfbfd;
  margin-top: 10px;
}

.APIMaster-main-right6 {
  width: 510px;
  height: 84px;
  background-color: #fbfbfd;
  margin-top: 10px;
}

.APIMaster-main-right h2 {
  font-size: 18px;
  font-weight: normal;
  padding-left: 42px;
  padding-top: 20px;
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: 19px 23px;
}

.APIMaster-main-right1 h2 {
  background-image: url(../images/master-item-icon-01.svg);
}

.APIMaster-main-right2 h2 {
  background-image: url(../images/master-item-icon-02.svg);
}

.APIMaster-main-right3 h2 {
  background-image: url(../images/master-item-icon-03.svg);
}

.APIMaster-main-right4 h2 {
  background-image: url(../images/master-item-icon-04.svg);
}

.APIMaster-main-right5 h2 {
  background-image: url(../images/master-item-icon-05.svg);
}

.APIMaster-main-right6 h2 {
  background-image: url(../images/master-item-icon-06.svg);
}

.APIMaster-main p {
  padding-left: 17px;
  font-size: 12px;
  padding-top: 6px;
}

/* 助力行业巨头 / 独角兽企业 */
.enterprise {
  margin-top: 100px;
}

.enterprise-h1 {
  text-align: center;
  font-size: 40px;
}

.enterprise-a {
  display: block;
  text-align: center;
  color: #12a0f5;
  padding-top: 25px;
}

/*  助力行业巨头 / 独角兽企业底部的精灵图*/
.bacimg {
  background-repeat: no-repeat;
  text-align: center;
  margin-top: 60px;
}

.bacimg img {
  padding-right: 25px;
  /* 灰度滤镜 */
  filter: grayscale(100%);
}

.bacimg img:hover {
  filter: grayscale(0);
}

.bacimg img:nth-last-child() {
  padding-right: 0;
}

/* 底部的swiper */
.mySwiperBottom {
  overflow: visible;
  width: 100%;
  height: 290px;
  margin-top: 40px;
  background-color: #f8f9fb;
  position: relative;
}

.swiper-main {
  margin: 0 auto;
  width: 1200px;
}

.slide-p {
  line-height: 24px;
  padding-top: 55px;
  font-size: 14px;
}

.swiper-slide-p {
  position: absolute;
  bottom: 24px;
  right: 155px
}

.swiper-slide-p-span {
  position: absolute;
  height: 4px;
  width: 15px;
  background-color: #1271ef;
  left: -22px;
  top: 50%;
}

.swiperBottom .swiper-slide {
  background: #ccc;
}

.swiper-right {
  width: 580px;
}

.mySwiperBottom-img {
  width: 50px;
  height: 56px;
  position: absolute;
  top: -30px;
  right: 692px;
}

.mySwiperBottom .swiper-slide img {
  width: 580px;
  margin-top: -22px;
}

.swiperBottom .swiper-slide .fr {
  width: 600px;
}

/*  数据安全和可靠合规的服务 */
.information h1 {
  text-align: center;
  font-size: 40px;
  margin-top: 110px;
}

.information-p {
  text-align: center;
  font-size: 14px;
  color: #666666;
  padding-top: 14px;
}

.information a {
  color: #1271ef;
  display: block;
  text-align: center;
  padding-top: 28px;
  font-size: 14px;
}

/* 数据安全和可靠合规的服务的精灵图 */
.spirit-box1 {
  background-repeat: no-repeat;
  position: relative;
}

.spirit-box1 p {
  position: absolute;
  bottom: -28px;
  left: 36px;
  font-size: 14px;
}

.spirit-box1,
.spirit-box2,
.spirit-box3,
.spirit-box4,
.spirit-box5 {
  margin-right: 30px;
}

.spirit-box1,
.spirit-box2,
.spirit-box3,
.spirit-box4,
.spirit-box5,
.spirit-box6 {
  width: 160px;
  text-align: center;
}

.spirit img {
  height: 90px;
}

/* 
 免费试用上百种API、体验各类产品和服务 */
.tryout {
  width: 100%;
  height: 240px;
  background-image: url(../images/login-register-bg.svg);
  background-color: #1271ef;
  margin-bottom: 45px;
}

.center {
  text-align: center;
}

.tryout h1 {
  padding-top: 72px;
  color: #fff;
  font-size: 30px;
}

.tryout-btn {
  text-align: center;
  height: 40px;
  width: 130px;
  border: 1px solid #fff;
  background-color: #1271ed;
  color: #fff;
  left: 50%;
  margin-left: 65px;
  margin-top: 20px;
}

/* 首页的尾部 */
.footer {
  position: relative;
  height: 444px;
  margin-bottom: 40px;
  /* background-color: #f8f8f8; */
}

.footer-box-p .footer-box-p1 {
  position: absolute;
  bottom: 17px;
  right: 160px;
  font-size: 14px;
  color: #b3b3b3;
}

.footer-box-p .footer-box-p2 {
  position: absolute;
  bottom: 17px;
  left: 4px;
  padding-left: 202px;
  color: #b3b3b3;
  font-size: 14px;
}

.footer-box1,
.footer-box2,
.footer-box3,
.footer-box4 {
  margin-right: 60px;
}

.footer .footer-box1 a,
.footer .footer-box2 a,
.footer .footer-box3 a,
.footer .footer-box4 a {
  color: #b3b3b3;
  padding-top: 15px;
  font-size: 10px;
  text-align: left;
}

.footer .footer-a {
  margin-top: 34px;
}

.footer .footer-box5 a {
  color: #b3b3b3;
  padding-top: 15px;
  font-size: 10px;
  text-align: left;
}

.footer h1 {
  color: #181818;
  font-size: 16px;
  padding-left: 0;
  text-align: right;
}


.footer .footer-left-h1 {
  text-align: left;
  font-size: 14px;
  font-weight: normal;
  color: #181818;
}

.footer-right p {
  color: #b3b3b3;
  font-size: 14px;
  padding-right: 6px;
  padding-top: 14px;
  text-align: right;
}

.footer-right img {
  width: 110px;
  height: 110px;
  text-align: right;
  padding-top: 36px;
}

.footer-last {
  margin-top: 45px;
}

/* 底部的精灵图 */

.footer-span-img1 {
  position: absolute;
  bottom: 16px;
  left: 158px;
}

.footer-span-img2 {
  position: absolute;
  bottom: 17px;
  left: 179px;
}

/* 回到顶部 */
.toTop {
  background-image: url(../images/returntopicon.jpg);
  position: fixed;
  bottom: 20px;
  right: 40px;
  background-position: -163px -56px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.toTop:hover {
  background-position-y: -98px;
}